@import "variables";

.organization-center{
  width: 100%;
  height: 100%;
  background: color($h5,c9);
  .organization-header{
    width: 100%;
    font-size: pxTorem(36);
    color:color($h5,c2);
    height: pxTorem(90);
    line-height: pxTorem(90);
    text-align: center;
    font-weight: bold;
    border-bottom: 1px solid color($h5,c9);
  }
  .organization-content{
    background: #fff;
    width: 100%;
    height: pxTorem(160);
    display: flex;
    align-items: center;
    .iconbox{
      width: pxTorem(110);
          height: pxTorem(110);
          margin:0 pxTorem(30);
          img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
    }
    .title{
      font-size: pxTorem(32);
      color:color($h5,c2);
    }
  }
  .organization-gap{
    width: 100%;
    height: pxTorem(20);
    background: color($h5,c9);
  }
  .organization-memberlist{
    background: #fff;
    width: 100%;
    padding:pxTorem(30) 0 0 0;
    .mtitle{
      width: 100%;
      font-size: pxTorem(30);
      color:color($h5,c2);
      border-left:pxTorem(8) solid color($h5,c1);
      padding-left: pxTorem(30);
      margin-bottom: pxTorem(30);
      font-weight: bold;
    }
    .memberlist-content{
      width: 100%;
      border-bottom: 1px solid color($h5,c9);
      padding:pxTorem(30);
      display: flex;
      align-items: center;
      flex-flow: row;
      .member-icon{
        width: pxTorem(80);
        height: pxTorem(80);
        position: relative;
        p{
          position: absolute;
          width: pxTorem(35);
          height: pxTorem(35);
          bottom: 3%;
          right:0;
        }
        img{
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .member-content{
        line-height: pxTorem(40);
        max-width: 80%;
        padding-left:pxTorem(30);
        flex:1;
        .up{
          font-size: pxTorem(30);
          color: color($h5,c2);
          line-height: pxTorem(40);
          img{
            height: pxTorem(30);
            padding-left: pxTorem(3);
            display: inline-block;
            margin-top: pxTorem(-23);
          }
          span{
            display: inline-block;
            max-width: 50%;
            overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
          }
        }
        .down{
          font-size: pxTorem(26);
          color: color($h5,c4);
        }
      }
      .member-fans{
        width: pxTorem(130);
        height: pxTorem(50);
        text-align: right;
        img{
          height: 100%;
        }
      }
    }
  }
}
@media screen and(max-width: 325px){
.organization-center .organization-memberlist .memberlist-content{
  padding:pxTorem(15);
}
  .organization-center .organization-memberlist .memberlist-content .member-content{
    padding-left: pxTorem(15);
  }
}
@media screen and(min-width: 765px){
.organization-center .organization-memberlist .memberlist-content{
  padding:pxTorem(35);
}
  .organization-center .organization-memberlist .memberlist-content .member-content{
    max-width: 80%;
    padding-left: pxTorem(35);

  }
}
